<template>
    <app-layout>
        <div class="vip">
            <div class="title">账户设置</div>
            <el-scrollbar class="vscroll">
                <div class="item" v-for="item in vipData" :key="item">
                    <template
                        v-if="item.product_code == 'football_pro' || item.product_code == 'football_svip' || item.product_code == 'football_vip'">
                        <template v-if="currentDate < item.end_stamp">
                            <div class="vip-item" v-if="checkRoles([])">
                                <img src="@/assets/vip/img-vip-bg.png" class="img1" />
                                <div class="item-text">
                                    <img src="@/assets/vip/icon-vip.png" class="img2" />
                                    <span style="margin-left: 16px;">会员名称：{{ item.product_name }}</span>
                                    <span style="margin-left: 16px;">会员有效期至：{{ new Date(item.end_stamp *
                                        1000).toLocaleString() }}</span>
                                </div>
                            </div>
                        </template>

                    </template>

                </div>
                <div class="vip-item" v-if="!checkRoles([])">
                    <img src="@/assets/vip/img-vip-bg.png" class="img1" />
                    <div class="item-text">
                        <img src="@/assets/vip/icon-vip-gray.png" class="img2" />
                        <span style="margin-left: 16px;">还不是VIP，请联系管理员开通</span>
                    </div>
                </div>
                <div class="tx">
                    <span>头像</span>
                    <div class="logo">
                        <span class="D">D</span>
                    </div>

                </div>
                <div class="underline"></div>
                <div class="name">
                    <span>用户名</span>
                    <div class="username">
                        {{ username }}
                    </div>

                </div>
                <div class="underline"></div>
                <div class="bind">
                    <div class="bind-text">绑定账号</div>
                    <div class="bind-items">
                        <div class="bind-item" v-for="item in bindData" :key="item">
                            <img :src="item.plant_icon" class="b-img" />
                            <span class="bind-name">{{ item.plant_name }}</span>
                            <el-button class="but3" v-if="bindStatus[item.plant_code]" @click="handleRelieve">
                                解除绑定
                            </el-button>
                            <el-button :class="bindStatus[item.plant_code] ? 'but4' : 'but2'"
                                :disabled="bindStatus[item.plant_code]"
                                @click="bindStatus[item.plant_code] ? null : openDialog(item)">
                                {{ bindStatus[item.plant_code] ? '已绑定' : '绑定账号' }}
                            </el-button>
                        </div>
                    </div>
                </div>
                <div class="underline"></div>

                <div class="logout">
                    <span>退出当前账号，不再使用</span>
                    <el-button class="but1" @click="handleLogout">退出登录</el-button>
                </div>
                <div class="underline"></div>

            </el-scrollbar>

            <app-bind-dialog v-model="dialogVisible" @bindData="handleBindData" />
        </div>
    </app-layout>
</template>
<script setup>
import { checkRoles } from "@/stores/roles"
import { ElMessage } from 'element-plus'
const route = useRoute();
const router = useRouter();
const currentItem = ref(null) // 用来存储当前点击的 item
const userInfo = JSON.parse(localStorage.userInfo)
const combins = userInfo.combins
const username = userInfo.user_name
const vipData = userInfo.subscribe
// console.log(userInfo.combins);

const currentDate = Math.floor(Date.now() / 1000)


const bindStatus = ref({}); // 用来存储每个绑定项的状态
const bindData = ref([])
plantCombins({ plant_code: userInfo.plant_code }).then((res) => {
    bindData.value = res
    bindData.value.forEach(item => {
        if (combins[item.plant_code]) {
            bindStatus.value[item.plant_code] = true;  // 标记为已绑定
        } else {
            bindStatus.value[item.plant_code] = false; // 标记为未绑定
        }
    });
    console.log(bindData.value);
})
const dialogVisible = ref(false);
const openDialog = (item) => {
    currentItem.value = item
    dialogVisible.value = true;
};

const handleBindData = (item) => {
    const body = {
        main_plant_code: userInfo.plant_code, //主平台plant_code
        sub_plant_code: currentItem.value.plant_code, //副平台plant_code
        user_name: item.user_name, //需要绑定的平台的账号密码
        pass_word: item.pass_word
    }

    userCombins(body).then((res) => {
        ElMessage.success('绑定成功')
    })
    dialogVisible.value = false;
}
const handleLogout = () => {
    const userStore = useUserStore()
    userStore.logout()
}
</script>
<style lang='scss' scoped>
.vip {
    height: calc(100vh - 200px);
    color: #333;
    background-color: #fff;
    padding: 40px 205px 63px 190px;
}

.vscroll {
    height: 100%;
}

.title {
    font-size: 20px;
    font-weight: 600;

}

.vip-item {
    display: flex;
    position: relative;
}

.item-text {
    display: flex;
    align-items: center;
    position: absolute;
    top: 32px;
    left: 24px;
    z-index: 2;
}

.tx {
    height: 88px;
    display: flex;
    align-items: center;
    margin-top: 41px;
}

.logo {
    width: 56px;
    height: 56px;
    margin: 16px 556px 16px 248px;
    background-color: #e92937;
    border-radius: 28px;
    color: #fff;
    font-size: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.underline {
    width: 1000px;
    height: 1px;
    background-color: #ebebeb;
}

.name {
    height: 88px;
    display: flex;
    align-items: center;
}

.username {
    margin: 16px 556px 16px 232px;
    font-weight: 600;
}

.logout {
    height: 88px;
    display: flex;
    align-items: center;
}

.but1 {
    width: 108px;
    height: 40px;
    margin-left: auto;
}

.but1:hover {
    background-color: #e92937;
    color: #fff;
    box-shadow: none;
}

.bind {
    // height: 88px;
    display: flex;
    // align-items: center;
    position: relative;
}

.bind-text {
    height: 78px;
    display: flex;
    align-items: center;
}

.bind-items {
    display: flex;
    flex-direction: column;

}

.bind-item {
    display: flex;
    align-items: center;
    margin: 15px 0;
}

.bind-name {
    margin-left: 10px;
    margin-right: 10px;
}

.b-img {
    margin-left: 210px;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    border: 1px solid #e92937;
}

.but3 {
    width: 108px;
    height: 40px;
    margin-left: auto;
}

.but3:hover {
    background-color: #e92937;
    color: #fff;
    box-shadow: none;
}

.but2 {
    width: 108px;
    height: 40px;
    position: absolute;
    right: 0;
}

.but4 {
    width: 108px;
    height: 40px;
    background-color: #f0f0f0;
    position: absolute;
    right: 0;
}

.but2:hover {
    background-color: #e92937;
    color: #fff;
    box-shadow: none;
}
</style>